<template>
  <div class="address-book">
    <template v-for="item in params" :key="item">
      <div class="address-book-item">
        <div class="address-book-item-name">
          <div>
            <span class="address-book-item-name-text">{{item.peopleName}}</span>
            <span v-if="item.headship && item.peopleName">&nbsp;&nbsp;·&nbsp;&nbsp;</span>
            <span>{{item.headship}}</span>
          </div>
        </div>
        <div class="address-book-item-location">
          <span>{{item.mobilePhone}}</span>
        </div>
      </div>
    </template>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

defineProps({
  params: {
    type: Array,
    default: () => [],
  },
})


</script>
<style scoped lang="scss">
.address-book {
  width: 100%;
  min-width: 616px;
  display: flex;
  flex-wrap: wrap;
  gap: calc(8px * var(--scale));
  .address-book-item{
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    background: var(--bg-color-page);
    gap: 4px;
    cursor: pointer;
    direction: ltr;
    .address-book-item-name{
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
      .address-book-item-name-text{
        color: var(--el-color-primary);
      }
    }
    .address-book-item-location{
      margin-top: 4px;
      font-size: 14px;
      color: var(--text-color-disabled);
    }
  }
}
</style>
